<template>
	<view class="myPage">
		<common-header :isCanBack="true" titleName="人脸识别" :className="headerClassName"></common-header>
		<view class="container">
			<view class="top">
				<view class="icon-box" v-if="isSuccess == true">
					<image :src="`${img_baseUrl}/statics/std/static/icon-success.png`" class="icon-result">
					</image>
				</view>
				<view class="icon-box" v-if="isSuccess == false">
					<image :src="`${img_baseUrl}/statics/std/static/icon-err.png`" class="icon-result">
					</image>
				</view>
				<view class="tip">
					{{ isSuccess ? "验证成功" : "验证失败" }}
				</view>
			</view>
			<view class="btn" @click="gotoVerify">
				<text class="text">开始验证</text>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		startEid
	} = require('../../mp_ecard_sdk/main');
	import commonHeader from '@/components/commonHeader.vue';
	import {
		requestGet, login
	} from '@/utils/request.js';
	export default {
		components: {
			commonHeader
		},
		data() {
			return {
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				headerClassName: '',
				token: '',
				isSuccess: null
			};
		},
		onShow() {
			// this.getEidToken()
		},
		methods: {
			onPageScroll(e) {
				if (e.scrollTop > 100) {
					this.headerClassName = 'headerClass';
				} else {
					this.headerClassName = '';
				}
			},
			async getEidToken() {
				const res = await requestGet('/baseplatform/wxAuth/getEidToken')
				if (res.code == 200) {
					this.token = res.data
				}
			},
			getEidResult(token) {
				requestGet('/baseplatform/wxAuth/getEidResult', {
						eidToken: token
					})
					.then(res => {
						if (res.code == 200) {
							if (res.data.errCode == 0) {
								//验证成功
								this.isSuccess = true
								login(true);
							} else {
								this.isSuccess = false
								//取不到有效值
								uni.showToast({
									icon:'none',
									title: '验证失败，请重新验证！'
								})
							}
						}
					})
			},
			gotoVerify: async function() {
				let _this = this
				await this.getEidToken();
				console.log('调用了人脸识别')
				const param = {
					data: {
						token: this.token,
					},
					verifyDoneCallback(res) {
						const {
							token,
							verifyDone
						} = res;
						console.log('收到核身完成的res:', res);
						console.log('核身的token是:', token);
						console.log('是否完成核身:', verifyDone);
						if (verifyDone) {
							_this.getEidResult(token)
						}
					},
				};
				this.token && startEid(param);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.myPage {
		height: 100%;
		width: 100%;
		position: relative;

		.container {
			height: 100%;
			width: 100%;
			position: relative;

			.top {
				width: 100%;
				height: 600rpx;
				background: linear-gradient(180deg, #C1DDFF 0%, rgba(193, 221, 255, 0) 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;

				.icon-box {
					width: 160rpx;
					height: 160rpx;
				}

				.icon-result {
					display: block;
					width: 100%;
					height: 100%;
				}

				.tip {
					font-size: 40rpx;
					font-weight: 700;
					color: rgba(0, 0, 0, 0.7);
					line-height: 56rpx;
					text-align: center;
					padding-bottom: 110rpx;
				}
			}

			.btn {
				margin-top: 300rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 598rpx;
				height: 84rpx;
				background: #3FAA73;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin: auto;

				.text {
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 32rpx;
				}
			}
		}
	}
</style>